package cn.mujiankeji.mbrowser.功能.阅读框

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FilterChip
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import cn.mujiankeji.mbrowser.功能.阅读框.模型.间距
import cn.mujiankeji.mbrowser.工具.clickable2
import cn.mujiankeji.mbrowser.界面.图标.MyIconPack
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.刷新
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.后退
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.太阳
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.字体减少
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.字体增加
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.月亮
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.菜单
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.设置
import cn.mujiankeji.mbrowser.界面.组件.配置列表.SeekBar


@Composable
fun 阅读框界面(state : 阅读框状态){

    Box(Modifier.fillMaxSize()){


        if (state.显示导航 && !state.显示目录){
            Box(Modifier.fillMaxSize()
                .padding(top = 120.dp)){
                底部导航(state)
            }
        }

        if (state.显示目录){
            Box(Modifier.fillMaxSize()
                .padding(bottom = 120.dp)){
                目录视图(state)
            }
        }

        if (state.显示导航){
            Box(Modifier.align(Alignment.BottomCenter)
                .height(120.dp)){
                底部导航(state)
            }
        }


    }


}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun 顶部导航(state: 阅读框状态){
    TopAppBar(navigationIcon = {
        IconButton({
            state.退出()
        }) {
            Icon(MyIconPack.后退,"推出")
        } },
        actions = {
            IconButton({
                state.刷新()
            }) {
                Icon(MyIconPack.刷新,"刷新")
            }
        },
        title = {

        })
}

@Composable
private fun 底部导航(state: 阅读框状态){
    Column(Modifier.fillMaxWidth()
        .background(MaterialTheme.colorScheme.surface)
        .padding(10.dp)) {


        // 章节进度  跳到章节
        Row(Modifier.fillMaxWidth()
            .height(30.dp),
            verticalAlignment = Alignment.CenterVertically)
        {

            Text("上一章", style = MaterialTheme.typography.bodyLarge,
                modifier = Modifier.clickable2 {
                    state.跳到上一章()
                }.padding(horizontal = 15.dp, vertical = 10.dp))

            // 进度条
            Spacer(Modifier.weight(1f).padding(horizontal = 10.dp))

            Text("下一章", style = MaterialTheme.typography.bodyLarge,
                modifier = Modifier.clickable2 {
                    state.跳到下一章()
                }.padding(horizontal = 15.dp, vertical = 10.dp))
        }

        Spacer(Modifier.height(5.dp))

        // 目录 设置 夜间
        Row(Modifier.fillMaxWidth()
            .height(65.dp)) {
            @Composable
            fun RowScope.btn(name : String,icon : ImageVector,clickable : ()->Unit){
                Box(Modifier.weight(1f).fillMaxHeight(),
                    contentAlignment = Alignment.Center)
                {

                    Column(horizontalAlignment = Alignment.CenterHorizontally,
                        modifier = Modifier.clip(MaterialTheme.shapes.medium)
                            .clickable {
                                clickable()
                            }
                            .padding(10.dp)) {
                        Icon(icon,"",
                            tint = MaterialTheme.colorScheme.onSurface.copy(0.8f),
                            modifier = Modifier.size(36.dp))
                        Spacer(Modifier.width(3.dp))

                        Text(name, style = MaterialTheme.typography.labelSmall,
                            color = MaterialTheme.colorScheme.onSurface)
                    }

                }

            }


            btn("目录",MyIconPack.菜单) {
                state.显示目录 = !state.显示目录
            }

            btn("设置",MyIconPack.设置) {
                state.显示设置 = !state.显示设置
            }

            if (state.夜间模式){
                btn("日间",MyIconPack.太阳) {
                    state.设置夜间模式(false)
                }
            }else{
                btn("夜间",MyIconPack.月亮) {
                    state.设置夜间模式(true)
                }
            }

        }


    }

}

@Composable
private fun 目录视图(state: 阅读框状态){
    // todo
}

@Composable
private fun 设置视图(state: 阅读框状态){
    @Composable
    fun line(name : String, content : @Composable RowScope.()->Unit){
        Row(Modifier.fillMaxWidth()
            .padding(vertical = 10.dp)
            .height(50.dp),
            verticalAlignment = Alignment.CenterVertically){

            Text(name, style = MaterialTheme.typography.bodyMedium)

            Spacer(Modifier.width(10.dp))

            Row(Modifier.fillMaxSize(),
                verticalAlignment = Alignment.CenterVertically){
                content()
            }
        }

    }
    Column(Modifier.fillMaxWidth()){
        line("亮度") {
            // todo seekbar调节亮度
            SeekBar(state.亮度, onSeek = {
                state.设置亮度(it)
            }, 线条高度 = 10.dp,
                滑块半径 = 10.dp,
                背景色 = MaterialTheme.colorScheme.surfaceVariant.copy(0.5f))
        }

        line("字号") {
            @Composable
            fun fontbtn(icon : ImageVector,clickable : ()->Unit){
                Box(Modifier.weight(1f)
                    .height(26.dp)
                    .clip(MaterialTheme.shapes.medium)
                    .background(MaterialTheme.colorScheme.surfaceVariant.copy(0.8f))
                    .clickable {
                        clickable()
                    },
                    contentAlignment = Alignment.Center){
                    Icon(icon,"",
                        modifier = Modifier.size(14.dp))
                }
            }

            fontbtn(MyIconPack.字体增加) {
                state.字体增大()
            }

            Text(text = state.字体大小.toString(),
                textAlign = TextAlign.Center,
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.weight(2f))

            fontbtn(MyIconPack.字体减少) {
                state.字体减少()
            }


        }

        line("背景") {
            // 日间
            FilterChip(selected = !state.夜间模式,
                leadingIcon = {
                    Icon(MyIconPack.太阳,"")
                },
                label = {
                    Text("浅色")
                },
                modifier = Modifier.weight(1f).height(26.dp),
                onClick = {
                    if (!state.夜间模式){
                        state.设置夜间模式(false)
                    }
                })

            Spacer(Modifier.width(15.dp))

            FilterChip(selected = state.夜间模式,
                leadingIcon = {
                    Icon(MyIconPack.月亮,"")
                },
                label = {
                    Text("暗色")
                },
                modifier = Modifier.weight(1f),
                onClick = {
                    if (!state.夜间模式){
                        state.设置夜间模式(false)
                    }
                })
        }

        line("行间距") {
            间距.entries.forEach {
                FilterChip(selected = it == state.行间距,
                    label = {
                        Text(it.name)
                    },
                    modifier = Modifier.weight(1f).height(26.dp)
                        .padding(horizontal = 5.dp),
                    onClick = {
                        state.设置行间距(it)
                    })
            }
        }

        line("页面距") {
            间距.entries.forEach {
                FilterChip(selected = it == state.页面边距,
                    label = {
                        Text(it.name)
                    },
                    modifier = Modifier.weight(1f).height(26.dp)
                        .padding(horizontal = 5.dp),
                    onClick = {
                        state.设置页面间距(it)
                    })
            }
        }

    }
}

